HTML4 ile Bezier Eğrisi Çizimi

Quadratic Bezier

3 kontrol noktası
2. derece eğri

Cubic Bezier

4 kontrol noktası
3. derece eğri

0.005
P₀
P₁
P₂
Quadratic Bezier | P₀: (100,300) | P₁: (300,100) | P₂: (500,300)

Bezier Eğrisi Algoritması

Kontrol noktalarını tanımla (P0, P1, P2 veya P0, P1, P2, P3)
t parametresini 0'dan 1'e kadar artır (örneğin: 0.01 adımlarla)
Her t değeri için Bezier fonksiyonunu hesapla
Hesaplanan (x,y) noktalarını çiz
Kontrol noktalarını ve bağlantı çizgilerini göster

Bezier Eğrisi Matematiksel Formülleri

Quadratic Bezier (2. derece):

B(t) = (1-t)²·P₀ + 2(1-t)t·P₁ + t²·P₂

Burada:
t = 0 → P₀ noktası (başlangıç)
t = 1 → P₂ noktası (bitiş)
P₁ = kontrol noktası

Cubic Bezier (3. derece):

B(t) = (1-t)³·P₀ + 3(1-t)²t·P₁ + 3(1-t)t²·P₂ + t³·P₃

Burada:
t = 0 → P₀ noktası (başlangıç)
t = 1 → P₃ noktası (bitiş)
P₁ ve P₂ = kontrol noktaları

Nasıl Kullanılır?

  1. Üstteki seçeneklerden Bezier tipini seçin (Quadratic veya Cubic)
  2. "Bezier Çiz" butonuna tıklayın
  3. Kontrol noktalarını sürükleyerek eğrinin şeklini değiştirebilirsiniz
  4. Çözünürlük slider'ı ile eğrinin pürüzsüzlüğünü ayarlayın
  5. Animasyon butonu ile eğrinin nasıl oluştuğunu görebilirsiniz